<template>
  <div class="update-gender">
    <van-picker
        title="性别"
        show-toolbar
        :columns="columns"
        :default-index="defaultIndex"
        @confirm="onConfirm"
        @cancel="$emit('close')"
        @change="onChange"
    />
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
  name: 'UpdateGender',
  components: {},
  props: {
      value: {
          type: Number,
          require: true
      }
  },
  data() {
    return {
        columns: ['男', '女'],
        defaultIndex: this.value
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
      onChange(picker, value, index) {
          this.defaultIndex = index
      },
      async onConfirm() {
          this.$toast.loading({
              message: '保存中',
              forbidClick: true
          })

          try {
              await updateUserProfile({
                  gender: this.defaultIndex
              })
              // 返回给父组件 v-model 监听数据变化
              this.$emit('input', this.defaultIndex)
              this.$emit('close')
              this.$toast.success('保存成功')
          } catch (err) {
              
          }
      }
  }
};
</script>
<style lang="less" scoped>
</style>